﻿<template>
  <el-dialog :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '60%' class = 'main_dialog' @close = "closeDialog"
  :close-on-click-modal = 'false' :close-on-press-escape = 'false'>
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules =  'rules' v-loading = 'dialogLoading'>
      <el-row :gutter = '10'>
        <el-col :span = '24' style = 'height:52px'>
          <el-form-item label = "数据源名称：" prop = 'source_name'>
            <el-input placeholder = "请输入数据源名称" clearable v-model = 'ruleForm.source_name' :readonly = "dialogInfo.operationType === 'preview'">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '24' style = 'height:52px'>
          <el-form-item label = "数据源类型：" prop = 'source_category'>
            <el-select placeholder = "请选择数据源类型" filterable clearable v-model = 'ruleForm.source_category'
            :readonly = "dialogInfo.operationType === 'preview'">
              <el-option v-for = "(item, index) in sourceCategoryList" :key = 'index'
              :label = 'item.text' :value = 'item.code'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = "24">
          <div style = 'float:right;width: 240px;'>
            <el-button type = "info" @click = "testConnectStrMethod">测试连接串</el-button>
            <el-button type = "primary" @click = "openConnectStrDialog"
            v-if = "dialogInfo.operationType !== 'preview'">生成连接串</el-button>
          </div>
          <div style = 'margin-right: 250px'>
            <el-form-item label = "连接串：" prop = 'connect_str'>
              <el-input placeholder = '请输入连接串' :readonly = "dialogInfo.operationType === 'preview'"
              type = 'textarea' autosize clearable v-model = 'ruleForm.connect_str'></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item class = 'form_noLeftMargin' v-if = "dialogInfo.operationType !== 'preview'">
        <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
    <ConnectStrForm :dialogInfo = 'connectStrDailog'
    @buildStrReset = 'connectStrDailog.dialogFormVisible = false'
    @buildStrSuccess = 'buildStrSuccess'></ConnectStrForm>
  </el-dialog>
</template>

<script src = './dataSourceForm.js'></script>
